import { Link } from '@brillout/docpress'
import { ProvidedBy, ConfigSpec } from '../../components'
import { UiFrameworkExtension } from '../../components'

<ConfigSpec
  env="client"
  cumulative
  providedBy={<ProvidedBy list={['vike-react', 'vike-vue']}><code>onBeforeRenderClient()</code></ProvidedBy>}
/>

Hook called at the beginning of rendering the page on the client-side. It's usually used for integrating tools, such as state management tools.

It's called upon rendering the first page (e.g. <Link href="/hydration">hydration</Link> when using <Link href="/ssr">SSR</Link>) and upon page navigation.

> If you want to perform an action only upon hydration then use <Link href="/pageContext#isHydration">`pageContext.isHydration`</Link>:
>
> ```ts
> // +onBeforeRenderClient.ts
>
> import type { PageContextClient } from 'vike/types'
>
> export async function onBeforeRenderClient(pageContext: PageContextClient) {
>   if (pageContext.isHydration) {
>     // ...
>   }
> }
> ```

It's called by `vike-{react,vue}` at the beginning of its <Link href="/onRenderClient">`onRenderClient()`</Link> implementation.


## Without `vike-{react,vue,solid}`

If you don't use any <UiFrameworkExtension /> then use <Link href="/onRenderClient">the `onRenderClient()` hook</Link> instead.


## See also

- <Link href="/onAfterRenderClient"/>
- <Link href="/onRenderClient"/>
- <Link href="/onHydrationEnd" />
- <Link href="/onPageTransitionStart" />
- <Link href="/onPageTransitionEnd" />
- <Link href="/onBeforeRenderHtml"/>
- <Link href="/onAfterRenderHtml"/>
- <Link href="/hooks"/>
- <Link href="/client" />
